<template>
    <el-dialog
        :model-value="props.value"
        :title="readOnly ? '事件详情' : props.detail ? '修改事件' : '新建事件'"
        width="1000px"
        @closed="props.closed"
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" :disabled="props.readOnly">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="事件名称" prop="displayName">
                        <el-input v-model.trim="form.displayName" placeholder="请输入事件名称" maxlength="50" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="模型名称" prop="modelName">
                        <el-input
                            :model-value="props.modelDetail?.displayName || props.detail?.objectName"
                            placeholder="请输入模型名称"
                            disabled
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="标识符" prop="eventName">
                        <el-input v-model="form.eventName" placeholder="系统自动生成" maxlength="50" disabled />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="事件类型" required prop="eventType">
                        <el-radio-group v-model="form.eventType">
                            <el-radio v-for="(value, key) in thingEventType" :key="key" :value="key">
                                {{ value }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="描述" prop="description">
                        <el-input
                            v-model="form.description"
                            :rows="4"
                            type="textarea"
                            placeholder="请输入描述"
                            maxlength="200"
                            show-word-limit
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <ParamConfigFormItem
                        label="输出参数"
                        prop="outputParam"
                        v-model="form.outputParam"
                        :attribute-type-list="props.attributeTypeList"
                        :model-detail="props.modelDetail"
                        :disabled="props.readOnly"
                    />
                </el-col>
            </el-row>
        </el-form>
        <template #footer v-if="!props.readOnly">
            <div class="dialog-footer">
                <el-button @click="props.close">取消</el-button>
                <el-button type="primary" @click="onSubmit" :loading="loading">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { type PopupBoxProps } from '@great/utils';
import { modelService } from '@great/services';
import { reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { useRequest } from 'vue-request';
import ParamConfigFormItem from '@/components/ParamConfigFormItem.vue';
import { thingEventType } from '@/utils/constant.ts';

interface IProps extends PopupBoxProps {
    readOnly?: boolean;
    modelDetail: Record<string, any>;
    attributeTypeList: Record<string, any>;
    detail?: Record<string, any>;
    callback?: () => void;
}

const props = defineProps<IProps>();
const formRef = useTemplateRef<FormInstance>('formRef');

const form = reactive({
    displayName: '',
    eventName: undefined,
    objectName: props.modelDetail?.objectName,
    eventType: 'INFO_TYPE',
    description: '',
    outputParam: undefined,
    ...props.detail
});

const rules = reactive<FormRules<any>>({
    displayName: [{ required: true, message: '请输入事件名称', trigger: ['change'] }]
});

const { run, loading } = useRequest(
    () => {
        if (props.detail) {
            return modelService.event.update({
                ...props.detail,
                ...form
            });
        }
        return modelService.event.create({
            ...form,
            objectName: props.modelDetail?.objectName
        });
    },
    {
        manual: true,
        onSuccess() {
            props.close();
            props.callback?.();
        }
    }
);

function onSubmit() {
    formRef.value?.validate(valid => {
        valid && run();
    });
}
</script>

<style lang="scss" scoped></style>
